<template>
  <div
    class="text-container"
    :style="{
      'background-color': widget.backgroundColor,
      border: widget.border ? '1px solid #000' : 'none',
    }"
  >
    <div
      class="text-content"
      :style="{
        color: widget.color,
        'font-size': widget.fontSize + 'px',
        'line-height': widget.lineHeight + 'px',
        'text-align': widget.textAlign,
        'font-weight': widget.fontWeight,
        'font-style': widget.fontStyle,
        'text-decoration': widget.textDecoration,
        'font-family': widget.fontFamily,
      }"
    >
      <span>{{ widget.text }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed } from 'vue'
  import { useEleStore } from '@/store/modules/coms'
  const props = defineProps<{
    index: number
  }>()
  const Store = useEleStore()
  const widget = computed(() => {
    return Store.getWidgets[props.index]
  })
</script>

<style lang="scss" scoped>
  .text-container {
    width: 100%;
    height: 100%;

    .text-content {
      word-break: break-all;
      white-space: pre-line;
      box-sizing: border-box;
    }
  }
</style>
